<template>
	<view>
		<u-overlay :show="show">
		<u-transition :show="show" mode="fade">
			<view class="toptitle_box" :colortype="colortype">
				<view class="totile_box_toptext " :class="colortype">
					<uni-icons v-if="titleicon" type="info" :color="colortype" size="24"></uni-icons>{{toptitle}}
				</view>
				<view class="totile_box_conter">{{msgCont}}</view>
				<view class="totile_box_Cfirm">
					<view @click="close()">取消</view>
					<view @click="confirm()">确定</view>
				</view>

			</view>
		</u-transition>
		</u-overlay >
	</view>
</template>

<script>
	/**
	 * confirm78 用户反馈组件
	 * @property {Boolean} titleicon 是否显示图标
	 * @property {Boolean} show 是否显示组件
	 * @property {String} colortype 显示类别【success|warning|error|info】
	 * @property {String} toptitle 头部提示文字
	 * @property {String} msgCont 提示内容
	 * @event {Function} confirm 点击 确定 触发事件
	 * @event {Function} close 点击 取消 触发事件
	 */
	export default {
		
		name: "xl-confirm78",

		emits: ['confirm','close'],
		props: {
			titleicon:{
				type: Boolean,
				default: false
			},
			show: {
				type: Boolean,
				default: false
			},
			colortype: {
				type: String,
				default: "u-info"
			},
			toptitle: {
				type: String,
				default: "提示"
			},
			msgCont: {
				type: String,
				default: "你确定要这样吗？"
			}

		},
		data() {
			return {
            
			}
		},
		methods: {
			close(){
				
				this.$emit('close')
			},
			confirm() {
				this.$emit('confirm')
				
				uni.showLoading({
					title: '正在加载...'
				})
				setTimeout(()=>{
					
					uni.hideLoading()
				},2000)
				
				
			},

		}

	}
</script>

<style lang="scss" scoped>
	.success{
		color:#18bc37;
	}
	.warning{
		color: #f3a73f;
	}
	.error{
		color: #e43d33;
	}
	.info{
		color: #8f939c;
	}
	
	.toptitle_box {
		font-size: 32rpx;
		font-family: 'MircroSoft YaHei';
		// background:url('../../static/uni.png') no-repeat top left;
		// background-size: 100% 100%;
		position: fixed;
		top: 40%;
		left: 50%;
		transform: translate(-50%, -50%);
		height: 360rpx;
		width: calc(100% - 100rpx);
		background-color: #ffffff;
		border-radius: 20rpx;
		border: 1px solid #efefef;
		text-align: center;

		display: flex;
		flex-direction: column;

		.totile_box_toptext {
			display: flex;
			flex: 1;
			align-items: center;
			justify-content: center;
		}

		.totile_box_conter {

			display: flex;
			flex: 1.5;
			align-items: center;
			justify-content: center;

		}

		.totile_box_Cfirm {
			border-top: 1px solid #efefef;
			flex: 1;
			display: flex;
			align-items: center;

			view {
				flex: 1;
				color: #3c9cff;
			}

			view:first-child {
				border-right: 1px solid #c7c7c7;
				color: red
			}

		}
	}

	.etransition {
		position: absolute;
		top: 50%;
		left: 50%;

		width: 200rpx;
		height: 200rpx;
		background-color: 'red'
	}
</style>